<template>
  <div>
    <div>小U课堂</div>
    <el-col :span="12" style="width: 200px" class="nav_left" id="nav_left">
      <el-menu default-active="1" class="el-menu-vertical-demo" router>
        <el-menu-item index="/index">
          <i class="el-icon-s-home icon"></i>
          <span slot="title"><router-link to="/index">首页</router-link></span>
        </el-menu-item>
        <el-submenu :index="String(titles.id)" class="nav_xiala" v-for="titles in menu_list" :key="titles.id" >
          <template slot="title">
            <i :class="titles.icon"></i>
            <span>{{ titles.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="smalltitle.url" v-for="smalltitle in titles.children " :key="smalltitle.id"> {{ smalltitle.title }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <!-- 渲染路由 -->
        <!-- <el-submenu index="1" class="nav_xiala">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/menu">菜单管理</el-menu-item>
            <el-menu-item index="/role">角色管理</el-menu-item>
            <el-menu-item index="/admin">管理员管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>商城管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/points">分类管理</el-menu-item>
            <el-menu-item index="/rules">规则管理</el-menu-item>
            <el-menu-item index="/goods">商品管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->
      </el-menu>
    </el-col>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
   created(){
    this.LeftStoreMutations()
   },
  methods:{
    ...mapMutations('LeftStore',['LeftStoreMutations'])
  },
  computed:{
    ...mapState({'menu_list':state=>state.LeftStore.menu_list})
  }
};
</script>

<style>
.nav_left li {
  width: 200px;
  color: white;
  /* padding-left: 43px !important; */
}
.nav_left,
.nav_left li {
  background-color: #ff725c;
  font-size: 18px;
  text-align: left;
}
.icon {
  color: #ff6040 !important;
}
#nav_left .is-active {
  width: 200px;
  background-color: white;
  color: #ff6040;
}
#nav_left .is-active a {
  color: #ff6040;
}
</style>